<template>
 <div class="white-nav">
    <div class="wrap">
      <div class="logo">
        <img src="../../../public/images/mi-home.png" alt="" class="mi-home">
        <img src="../../../public/images/mi-logo.png" alt="" class="mi-logo">
      </div>
      <div class="nav-bar">
        <ul>
          <li><a href="#"><img src="../../../public/logodt.gif" alt="" width="100" height="50"></a></li>
          <li>
            <a href="#">xiaomi手机</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in xiaomi" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`">
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                    </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">REDMI手机</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in redmi" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                    </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">电视</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in dianshi" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                      </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">笔记本</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in book" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                          </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">平板</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in pad" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                      </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">家电</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in jiadian" :key="item.gname">
                  <li>
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                          </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">路由器</a>
            <div class="nav-bar-list">
              <div class="wrap">
                <ul v-for="item in luyou" :key="item.gname">
                  <li>
                  
                    <a href="#">
                      <router-link :to="`/goodsdetail?goodsid=${item.gid}`"> 
                    
                      <div class="img-box">
                        <img :src="`../../../public/images/${item.img}`" alt="">
                      </div>
                      <p class="name">{{item.gname}}</p>
                      <p class="price">{{item.price}}</p>
                      </router-link>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <a href="#">服务中心</a>
            <div class="">
              <div class="">
              </div>
            </div>
          </li>
          <li>
            <a href="#">社区</a>
            <div class="">
              <div class="">
              </div>
            </div>
          </li>
          <li>
            <a href="#/goods">查看全部商品</a>
            <div class="">
              <div class="">
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="search">
      <div>
          <input v-model="skey">
          <button @click="search()">查询</button>
      </div>
  </div>
    </div>
  </div>
</template>

<script setup>
import axios from '../../api/axios';
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const skey = ref('')
const xiaomi = ref([])
const redmi = ref([])
const book = ref([])
const pad = ref([])
const jiadian = ref([])
const dianshi = ref([])
const luyou = ref([])

const router = useRouter()
function search() {
   router.push({
      path: '/goods', //hash地址
      query: {  //地址栏参数
          skey: this.skey
      }
  }, () => { })
}
axios.post('/api/goods/xiaomi')
 .then((res) => {
    //console.log('Goods response:', res.data); // 添加调试信息
    xiaomi.value = res.data.goods
    //console.log(xiaomi.value)
  })
 .catch(() => {
    console.log('Error getting goods'); // 添加调试信息
  });
axios.post('/api/goods/redmi')
.then((res) => {
  redmi.value = res.data.goods
  //console.log(redmi.value)
})
.catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});
axios.post('/api/goods/book').then((res) => {
  book.value = res.data.goods
  //console.log(book.value)
}).catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});
axios.post('/api/goods/pad').then((res) => {
  pad.value = res.data.goods
  //console.log(pad.value)
}).catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});
axios.post('/api/goods/dianshi').then((res) => {
  dianshi.value = res.data.goods
  //console.log(dianshi.value)
}).catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});
axios.post('/api/goods/jiadian').then((res) => {
  jiadian.value = res.data.goods
  //console.log(jiadian.value)
}).catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});
axios.post('/api/goods/luyou').then((res) => {
  luyou.value = res.data.goods
  //console.log(luyou.value)
}).catch(() => {
  console.log('Error getting goods'); // 添加调试信息
});

</script>

<style lang="css" scoped>
.img-box img {
  width: 100%;
  height: 100%;
}
</style>